import React, { useState } from 'react';
import { Modal, Form, Input, message, Spin, Upload, Button, Icon } from 'antd';
import request from '@/utils/request';
import styles from '../index.less';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function EditStatusFlow({ visiable, close, form, passdata, callback, title }) {
  const { getFieldDecorator } = form;
  const [loading, setLoading] = useState(false);
  const [fileList, setFileList] = useState([]);

  const onSubmit = () => {
    form.validateFields((err, value) => {
      if (err) return;

      if (title === 'edit') {
        setLoading(true);
        request('pmc/pms/PmPackageController/update', {
          data: { ...value, catalogId: passdata.pid, packageId: passdata.id },
        })
          .then(res => {
            if (res.success) {
              message.success('流程修改成功！');
              callback(res.success);
              close();
            } else {
              message.error('流程修改失败！');
            }
          })
          .always(() => setLoading(false));
      } else if (title === 'add') {
        setLoading(true);
        request('pmc/pms/PmOrderFlowDefController/add', {
          data: {
            processType: '1100',
            catalogId: passdata.id,
            flowName: value.packageName,
            flowCode: value.packageCode,
          },
        })
          .then(res => {
            if (res.success) {
              message.success('流程新建成功！');
              callback(res.success);
              close();
            } else {
              message.error('流程新建失败！');
            }
          })
          .always(() => setLoading(false));
      } else if (title === 'export') {
        const formData = new FormData();

        fileList.forEach(file => {
          formData.append('file', file);
          formData.append('processType', '1100');
          formData.append('catalogId', passdata.id);
          formData.append('flowName', value.packageName);
          formData.append('flowCode', value.packageCode);
        });

        setLoading(true);
        request('pmc/pms/PmOrderFlowDefController/importByTxt', {
          data: formData,
          processData: false,
          contentType: false,
        })
          .then(res => {
            if (res.success) {
              message.success('流程导入成功！');
              callback(res.success);
              close();
            } else {
              message.error('流程导入失败！');
            }
          })
          .always(() => setLoading(false));
      }
    });
  };

  const props = {
    onRemove: file => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: file => {
      setFileList([...fileList, file]);
      return false;
    },
    fileList,
    listType: 'text',
    accept: '.txt',
  };

  return (
    <Modal
      title={
        title === 'edit' ? '状态机流程编辑' : title === 'add' ? '状态机流程新增' : '状态机流程导入'
      }
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visiable}
      onOk={onSubmit}
    >
      <Spin spinning={loading}>
        <Form>
          <Form.Item label="流程目录" {...formItemLayout}>
            {getFieldDecorator('catalogId', {
              initialValue: title === 'edit' ? passdata.pname : passdata.name,
            })(<Input placeholder="请输入" disabled />)}
          </Form.Item>
          <Form.Item label="流程名称" {...formItemLayout}>
            {getFieldDecorator('packageName', {
              initialValue: title === 'edit' ? passdata.name : '',
              rules: [
                {
                  required: true,
                  message: '目录名称不能为空',
                },
              ],
            })(<Input placeholder="请输入" />)}
          </Form.Item>

          <Form.Item label="流程编码" {...formItemLayout}>
            {getFieldDecorator('packageCode', {
              initialValue: title === 'edit' ? passdata.code : '',
              rules: [
                {
                  required: true,
                  message: '流程编码不能为空',
                },
              ],
            })(<Input placeholder="请输入" disabled={title === 'edit' ? true : false} />)}
          </Form.Item>
          {title === 'export' ? (
            <Form.Item label="附件导入" {...formItemLayout}>
              {getFieldDecorator('file', {
                rules: [
                  {
                    required: true,
                    message: '附件导入不能为空',
                  },
                ],
              })(
                <Upload {...props} className={styles.upload_list}>
                  {fileList.length === 1 ? null : (
                    <Button>
                      <Icon type="upload" /> 选择附件
                    </Button>
                  )}
                </Upload>
              )}
            </Form.Item>
          ) : null}
        </Form>
      </Spin>
    </Modal>
  );
}

export default Form.create()(EditStatusFlow);
